<template>
  <div class="default-layout">
    <!-- 顶部导航栏 -->
    <header class="layout-header">
      <div class="header-content">
        <div class="header-left">
          <div class="logo" @click="goHome">
            <el-icon size="24" color="#409EFF"><TrendCharts /></el-icon>
            <span class="logo-text">{{ APP_CONFIG.name }}</span>
          </div>
        </div>
        
        <nav class="header-nav" v-if="!isMobile">
          <el-menu
            :default-active="activeRoute"
            mode="horizontal"
            @select="handleMenuSelect"
            class="header-menu">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/data-cleaning">数据清洗</el-menu-item>
            <el-menu-item index="/data-model">数据建模</el-menu-item>
            <el-menu-item index="/designer">报表设计</el-menu-item>
          </el-menu>
        </nav>
        
        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-btn" v-if="isMobile">
          <el-button circle @click="showMobileMenu = true">
            <el-icon><Menu /></el-icon>
          </el-button>
        </div>
        
        <div class="header-right">
          <el-tooltip content="主题切换" placement="bottom">
            <el-button circle @click="toggleTheme">
              <el-icon><Sunny v-if="isDark" /><Moon v-else /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-tooltip content="帮助" placement="bottom">
            <el-button circle @click="showHelp">
              <el-icon><QuestionFilled /></el-icon>
            </el-button>
          </el-tooltip>
          
          <el-dropdown @command="handleUserAction">
            <el-button circle>
              <el-icon><User /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="preferences">
                  <el-icon><Setting /></el-icon>
                  偏好设置
                </el-dropdown-item>
                <el-dropdown-item command="about">
                  <el-icon><InfoFilled /></el-icon>
                  关于
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <el-icon><SwitchButton /></el-icon>
                  退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="layout-main">
      <router-view v-slot="{ Component, route }">
        <transition name="page" mode="out-in">
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>

    <!-- 底部状态栏 -->
    <footer class="layout-footer" v-if="showFooter">
      <div class="footer-content">
        <div class="footer-left">
          <span class="status-item">
            <el-icon><Connection /></el-icon>
            数据源: {{ dataSourceCount }}
          </span>
          <span class="status-item">
            <el-icon><Grid /></el-icon>
            报表: {{ reportCount }}
          </span>
        </div>
        
        <div class="footer-center">
          <span class="version">v{{ APP_CONFIG.version }}</span>
        </div>
        
        <div class="footer-right">
          <span class="status-item">
            <el-icon><Clock /></el-icon>
            {{ currentTime }}
          </span>
        </div>
      </div>
    </footer>

    <!-- 全局加载遮罩 -->
    <el-loading
      v-loading="globalLoading"
      :text="loadingText"
      background="rgba(0, 0, 0, 0.7)"
      element-loading-svg-view-box="-10, -10, 50, 50"
      class="global-loading" />

    <!-- 偏好设置对话框 -->
    <PreferencesDialog v-model="showPreferences" />
    
    <!-- 关于对话框 -->
    <AboutDialog v-model="showAbout" />
    
    <!-- 帮助对话框 -->
    <HelpDialog v-model="showHelpDialog" />
    
    <!-- 移动端抽屉菜单 -->
    <el-drawer
      v-model="showMobileMenu"
      title="导航菜单"
      direction="ltr"
      size="280px">
      <el-menu
        :default-active="activeRoute"
        @select="handleMobileMenuSelect"
        class="mobile-menu">
        <el-menu-item index="/">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/data-cleaning">
          <el-icon><Operation /></el-icon>
          <span>数据清洗</span>
        </el-menu-item>
        <el-menu-item index="/data-model">
          <el-icon><Connection /></el-icon>
          <span>数据建模</span>
        </el-menu-item>
        <el-menu-item index="/designer">
          <el-icon><Grid /></el-icon>
          <span>报表设计</span>
        </el-menu-item>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserPreferences } from '../composables/useLocalStorage'
import { useNotification } from '../composables/useNotification'
import { useResponsive } from '../composables/useResponsive'
import { APP_CONFIG, ROUTES } from '../constants'
import PreferencesDialog from '../components/common/PreferencesDialog.vue'
import AboutDialog from '../components/common/AboutDialog.vue'
import HelpDialog from '../components/common/HelpDialog.vue'
import { 
  TrendCharts, 
  Sunny, 
  Moon, 
  QuestionFilled, 
  User, 
  Setting, 
  InfoFilled, 
  SwitchButton,
  Connection,
  Grid,
  Clock,
  Menu,
  House,
  Operation
} from '@element-plus/icons-vue'

// 路由和通知
const router = useRouter()
const route = useRoute()
const { success, info } = useNotification()

// 用户偏好
const { preferences, updatePreference } = useUserPreferences()

// 响应式
const { isMobile, isTablet, currentBreakpoint } = useResponsive()

// 响应式数据
const currentTime = ref('')
const globalLoading = ref(false)
const loadingText = ref('')
const showFooter = ref(true)
const showPreferences = ref(false)
const showAbout = ref(false)
const showHelpDialog = ref(false)
const showMobileMenu = ref(false)

// 计算属性
const activeRoute = computed(() => route.path)
const isDark = computed(() => preferences.value.theme === 'dark')
const dataSourceCount = computed(() => 0) // 从store获取
const reportCount = computed(() => 0) // 从store获取

// 方法
const goHome = () => {
  router.push(ROUTES.HOME)
}

const handleMenuSelect = (index) => {
  router.push(index)
}

const handleMobileMenuSelect = (index) => {
  router.push(index)
  showMobileMenu.value = false
}

const toggleTheme = () => {
  const newTheme = isDark.value ? 'light' : 'dark'
  updatePreference('theme', newTheme)
  applyTheme(newTheme)
  success(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}主题`)
}

const applyTheme = (theme) => {
  if (theme === 'dark') {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}

const showHelp = () => {
  showHelpDialog.value = true
}

const handleUserAction = (command) => {
  switch (command) {
    case 'preferences':
      showPreferences.value = true
      break
    case 'about':
      showAbout.value = true
      break
    case 'logout':
      info('退出功能开发中...')
      break
  }
}

const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString('zh-CN', {
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 生命周期
let timeInterval = null

onMounted(() => {
  // 应用主题
  applyTheme(preferences.value.theme)
  
  // 启动时间更新
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
  
  // 监听全局加载状态
  // 这里可以监听全局状态管理中的加载状态
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})

// 暴露给子组件的方法
defineExpose({
  setGlobalLoading: (loading, text = '加载中...') => {
    globalLoading.value = loading
    loadingText.value = text
  },
  toggleFooter: (show) => {
    showFooter.value = show
  }
})
</script>

<style scoped>
.default-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--el-bg-color);
}

.layout-header {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.header-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-menu {
  border-bottom: none;
  background: transparent;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.layout-main {
  flex: 1;
  overflow: hidden;
  background: var(--el-bg-color-page);
}

.layout-footer {
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color);
  padding: 8px 0;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.footer-center {
  display: flex;
  align-items: center;
}

.version {
  font-size: 12px;
  color: var(--el-text-color-placeholder);
}

/* 页面切换动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: flex;
  align-items: center;
}

.mobile-menu {
  border-right: none;
}

.mobile-menu .el-menu-item {
  height: 56px;
  line-height: 56px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
  }
  
  .header-nav {
    display: none;
  }
  
  .header-right {
    gap: 8px;
  }
  
  .header-right .el-button {
    width: 36px;
    height: 36px;
  }
  
  .logo-text {
    display: none;
  }
  
  .footer-content {
    padding: 0 16px;
    flex-direction: column;
    gap: 8px;
  }
  
  .footer-left,
  .footer-right {
    gap: 12px;
    justify-content: center;
  }
  
  .status-item {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 12px;
  }
  
  .header-right {
    gap: 4px;
  }
  
  .header-right .el-button {
    width: 32px;
    height: 32px;
  }
  
  .layout-footer {
    display: none;
  }
}

/* 深色主题 */
:global(.dark) {
  --el-bg-color: #1a1a1a;
  --el-bg-color-page: #0a0a0a;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #8d9095;
  --el-border-color: #414243;
}
</style>
